<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>24 Ways</title>
</head>
<body>
	1.cookie的缺点
		cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。
		第一：每个特定的域名下最多生成20个cookie

		1.IE6或更低版本最多20个cookie
		2.IE7和之后的版本最后可以有50个cookie。
		3.Firefox最多50个cookie
		4.chrome和Safari没有做硬性限制
		IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

		1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

		2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

		3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用

	2.sessionStorage和localStorage
		sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

		而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

	3.css种link和import的区别
		(1) link属于HTML标签，而@import是CSS提供的;
		(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
		(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

	4.css盒模型
		1）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
		2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;
	
	5.为什么要初始化CSS样式。
		1.因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器   之间的页面显示差异。
		  当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
		  *最简单的初始化方法就是（不建议）：{padding: 0; margin: 0;}
		2.可选择淘宝、京东等初始化样式

	6.解释下 CSS sprites，以及你要如何在页面或网站中使用它。
		CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的"background-image"，"background-repeat"，"background-position" 的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了 http2。

	7.说说你对语义化的理解？
		1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
		2. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
		3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
		4. 便于团队开发和维护，语义化使得网页更具可读性，是进一步开发网页的必要步骤，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

	8.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
		1. <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。 
		2. 严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。
		3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
		4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 

	9.HTML与XHTML——二者有什么区别
		最主要的不同：
			XHTML 元素必须被正确地嵌套。
			XHTML 元素必须被关闭。
			标签名必须用小写字母。
			XHTML 文档必须拥有根元素。

	10.webSocket 特点
		（1）建立在 TCP 协议之上，服务器端的实现比较容易。
		（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此不容易屏蔽，能通过各种 HTTP 代理服务器。
		（3）数据格式比较轻量，性能开销小，通信高效。
		（4）可以发送文本，也可以发送二进制数据。
		（5）没有同源限制，客户端可以与任意服务器通信。
		（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL
		通过第一个 HTTP request 建立了 TCP 连接之后，之后的交换数据都不需要再发 HTTP request了，使得这个长连接变成了一个真.长连接。但是不需要发送 HTTP header就能交换数据显然和原有的 HTTP 协议是有区>别的，所以它需要对服务器和客户端都进行升级才能实现。

	11.null和undefined的区别？
		null是一个表示"无"的对象，转为数值时为0
		undefined是一个表示"无"的原始值，转为数值时为NaN

		当声明的变量还未被初始化时，变量的默认值为undefined
		null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象

	12.js延迟加载的方式有哪些？
		1. defer和async
		2. 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）
		1. 异步加载的方案： 动态插入 script 标签
		2. 通过 ajax 去获取 js 代码，然后通过 eval 执行
		4. 创建并插入 iframe，让它异步执行 js
		5. 延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的

	13.defer和async
		(1).这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoad时间触发前执行，因此最好只包含一个延迟脚本。为此，把延迟脚本放在页面底部仍然是最佳选择。
		
		(2).这个属性与defer类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照它们的先后顺序执行。
			第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依非赖常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。
			defer只支持IE

	14.call和apply
		JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法
		/*apply()方法*/
		function.apply(thisObj[, argArray])//add.apply(sub,[4,2]);
		/*call()方法*/
		function.call(thisObj[, arg1[, arg2[, [,...argN]]]]); //add.call(sub,4,2);
		它们各自的定义：
			apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

			call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

		它们的共同之处：
			都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

		它们的不同之处：
			apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。

			call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。 

		实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。

	15.哪些操作会造成内存泄漏？
		内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
		垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
		1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
		2. 闭包
		3. 控制台日志
		4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

	16.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？(https://zrj.me/archives/593 详解过程)
		分为4个步骤：
			1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启一动个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
			2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
			3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
			4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

			请求返回后，便进入了我们关注的前端模块
			简单来说，浏览器会解析 HTML 生成 DOM Tree，其次会根据 CSS 生成 CSS Rule Tree，而 javascript 又可以根据 DOM API 操作 DOM

	17.什么是 "use strict"; ? 使用它的好处和坏处分别是什么？
		ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。
		设立"严格模式"的目的，主要有以下几个：
		1. 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
		2. 消除代码运行的一些不安全之处，保证代码运行的安全；
		3. 提高编译器效率，增加运行速度；
		4. 为未来新版本的Javascript做好铺垫。
		注：经过测试 IE6,7,8,9 均不支持严格模式。

	18.双向绑定原理
		AngularJS 采用“脏值检测”的方式，数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现。如果是手动对 ViewModel 的数据进行变更，为确保变更同步到视图，需要手动触发一次“脏值检测”。

		VueJS 则使用 ES5 提供的 Object.defineProperty() 方法（数据劫持的方式），监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

	19.数组去重方法indexOf 、 new Set() 、reduce

	20.Object.prototype.toString.call(a)精确判断数据类型, instanceof 只能用来判断构造函数

	21.num.toFixed(2) //保留2位小数

	22.call和apply都会执行函数，而bind返回一个新函数，后边必须加上()执行该函数 否则函数不执行

	23.字符串去除所有空格 str.replace(/[ ]/g,"")或者循环去空格或者正则  去除前后空格：str.replace(/(^\s*)|(\s*$)/g,"")

	24.深克隆对象 const newObj = JSON.parse(JSON.stringify(oldObj));

	25.node中的模块（即每个js）默认暴露出的是一个空对象，exports.name = 'xw'是属性的添加，module.exports={name:'xw'}是对模块的重写

	26.addEventListener除了可以设置元素触发顺序外，还能多次绑定事件，因为 on 事件多次绑定的话会出现覆盖(后事件覆盖前事件)
</body>
</html>